<template>
  <div id="app">
          <div class="box">
            <div class="son1"></div>
            <div class="son2"></div>
          </div>
          <div class="box2"></div>
    <router-view/>
  </div>
</template>

<style lang="scss">
// pnpm install node-sass sass-loader --S
/*
  sass ==> sass旧   scss ==> 新

  ==> 目前推荐使用scss
  1. scss 是 sass 3新增的， CSS的超集
  2. scss 和 less 都支持嵌套的语法, 都可以定义变量，混入等操作
      less   ==> @变量名
      scss   ==> $变量名

  3. stylus 和 sass 语法很像，严格保持缩进来规范css的， 没有分号；没有{}

  4. 现在使用 scss / less ， 当然stylus 也有用到。

*/
// 定义一个外部的变量
$color: skyblue;
$width:300px; // 变量 1
.box{
  $width:100px; // 变量2
  width:400px;
  height: 400px;
  padding: 20px;
  background-color: $color;
  .son1{
    width: $width; // ==> 用的是最近的那个变量
    height: $width;
    margin: 20px;
    background-color: orange;
  }
}

// 定义的变量有作用域，不能在外部使用
// .box2{
//   width:$width;
//   height: 200px;
// }

// scss 可以混入，相当于是定义一个函数
// ==> 把一些公共的代码抽离出来，还可以传参数
// @mixin  +  @inclue
// 1. 不带参数
@mixin orangeTheme{
  background-color: orange;
  color:orange;
  border-color: orange;
}
// 2. 带参数
@mixin theme($color:skyblue){
  background-color: $color;
  color:$color;
  border-color: $color;
}
.box2 {
  width:300px;
  height: 300px;
  margin: 20px;
  @include theme(purple)
}
</style>
